<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ng-repeat</title>
    <script src="../jsLib/angular-1.3.0.js"></script>
    <script src="../jsLib/jquery-2.1.3.min.js"></script>
    <script>
        $(function(){

            var domObject = $("#content").get(0);
            domObject.addEventListener("DOMNodeRemoved",function(event){
                console.log("some dom was deleted.");
            });

        });

        function wholeController($scope,$rootScope,$injector)
        {
            $scope.dataList = [
                {"id":1,"name":"a1"},
                {"id":2,"name":"a2"},
                {"id":3,"name":"a3"},
                {"id":4,"name":"a4"}
            ];

            $scope.first = function(){
                $scope.dataList = [
                    {"id":1,"name":"b1"},
                    {"id":2,"name":"b2"},
                    {"id":3,"name":"b3"},
                    {"id":4,"name":"b4"},
                    {"id":4,"name":"b5"}
                ];

            }
        }

    </script>
</head>

<body ng-app>
<div ng-controller="wholeController">
    <input type="button" value="first" ng-click="first();"/>
    <div>begin</div>
    <div id="content">
        <div ng-repeat="item in dataList track by $index">{{item.name}}</div>
    </div>
    <div>end</div>
</div>
</body>

</html>